<template>
    <div class="side">
        <el-container class="layout-container-demo" style="height: 1400px">
                <el-row class="tac">
                    <el-col :span="25">
                        <el-menu active-text-color="#fff" background-color="#545c64" class="el-menu-vertical-demo"
                            :collapse="isCollapse" default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose">
                            <div class="top"><el-icon>
                                    <Monitor />
                                </el-icon>课堂后台管理系统</div>
                            <el-menu-item index="1">
                                <el-icon>
                                    <Odometer />
                                </el-icon>
                                <span>仪表盘</span>
                            </el-menu-item>
                            <el-sub-menu index="2">
                                <template #title>
                                    <el-icon>
                                        <Bicycle />
                                    </el-icon>
                                    <span>权限管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="2-1" style="padding-left: 30px; margin-top: -20px;"><el-icon>
                                            <Headset />
                                        </el-icon>用户管理</el-menu-item>
                                    <el-menu-item index="2-2" style="padding-left: 30px; margin-top:0px;"><el-icon>
                                            <Iphone />
                                        </el-icon>角色管理</el-menu-item>
                                    <el-menu-item index="2-3" style="padding-left: 30px; margin-top:0px;"><el-icon>
                                            <VideoCameraFilled />
                                        </el-icon>权限管理</el-menu-item>
                                </el-menu-item-group>
                            </el-sub-menu>
                            <el-sub-menu index="3">
                                <template #title>
                                    <el-icon>
                                        <Baseball />
                                    </el-icon>
                                    <span>教师管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="3-1" style="padding-left: 30px; margin-top: -20px;"><el-icon>
                                            <Basketball />
                                        </el-icon>讲师列表</el-menu-item>
                                    <el-menu-item index="3-2" style="padding-left: 30px; margin-top:0px;"><el-icon>
                                            <Soccer />
                                        </el-icon>添加讲师</el-menu-item>
                                </el-menu-item-group>
                            </el-sub-menu>
                            <el-sub-menu index="4">
                                <template #title>
                                    <el-icon>
                                        <Drizzling />
                                    </el-icon>
                                    <span>课程分类管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="4-1" style="padding-left: 30px; margin-top: -20px;"><el-icon>
                                            <Sunny />
                                        </el-icon>课程分类列表</el-menu-item>
                                    <el-menu-item index="4-2" style="padding-left: 30px; margin-top:0px;"><el-icon>
                                            <Moon />
                                        </el-icon>导入课程类别</el-menu-item>
                                </el-menu-item-group>
                            </el-sub-menu>
                            <el-sub-menu index="5">
                                <template #title>
                                    <el-icon>
                                        <Burger />
                                    </el-icon>
                                    <span>课程管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="5-1" style="padding-left: 30px; margin-top: -20px;"><el-icon>
                                            <Food />
                                        </el-icon>课程列表</el-menu-item>
                                    <el-menu-item index="5-2" style="padding-left: 30px; margin-top:0px;"><el-icon>
                                            <Chicken />
                                        </el-icon>添加课程</el-menu-item>
                                </el-menu-item-group>
                            </el-sub-menu>
                            <el-sub-menu index="6">
                                <template #title>
                                    <el-icon>
                                        <Dessert />
                                    </el-icon>
                                    <span>轮播图管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="6-1" style="padding-left: 30px; margin-top: -20px;"><el-icon>
                                            <IceTea />
                                        </el-icon>轮播图列表</el-menu-item>
                                    <el-menu-item index="6-2" style="padding-left: 30px; margin-top:0px;"><el-icon>
                                            <MilkTea />
                                        </el-icon>添加轮播图</el-menu-item>
                                </el-menu-item-group>
                            </el-sub-menu>
                            <el-menu-item index="7">
                                <el-icon>
                                    <Headset />
                                </el-icon>
                                <span>用户列表</span>
                            </el-menu-item>
                            <el-sub-menu index="8">
                                <template #title>
                                    <el-icon>
                                        <Grape />
                                    </el-icon>
                                    <span>统计分析</span>
                                </template>
                            </el-sub-menu>
                            <el-menu-item index="9">
                                <el-icon>
                                    <ShoppingCartFull />
                                </el-icon>
                                <span>订单列表</span>
                            </el-menu-item>
                            <el-sub-menu index="10">
                                <template #title>
                                    <el-icon>
                                        <Memo />
                                    </el-icon>
                                    <span>文章管理</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="6-1" style="padding-left: 30px; margin-top: -20px;"><el-icon>
                                            <Notebook />
                                        </el-icon>文章列表</el-menu-item>
                                    <el-menu-item index="6-2" style="padding-left: 30px; margin-top:0px;"><el-icon>
                                            <Position />
                                        </el-icon>添加文章</el-menu-item>
                                    <el-menu-item index="6-2" style="padding-left: 30px; margin-top:0px;"><el-icon>
                                            <Star />
                                        </el-icon>文章类别</el-menu-item>
                                </el-menu-item-group>
                            </el-sub-menu>
                            <el-menu-item index="11">
                                <el-icon>
                                    <EditPen />
                                </el-icon>
                                <span>留言列表</span>
                            </el-menu-item>
                        </el-menu>
                    </el-col>

                </el-row>
            <el-container>

                <el-header style="text-align: right; font-size: 12px">
                    <div class="leftside">
                        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
                            <el-radio-button :value="false">展开</el-radio-button>
                            <el-radio-button :value="true">折叠</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="toolbar">
                        <span>test</span>
                        <el-dropdown>
                            <el-icon style="margin-right: 8px; margin-top: 1px">
                                <CaretBottom />
                            </el-icon>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>View</el-dropdown-item>
                                    <el-dropdown-item>Add</el-dropdown-item>
                                    <el-dropdown-item>Delete</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </el-header>

                <el-main>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
import { ref } from 'vue';
const isCollapse = ref(true)
</script>

<style lang="less" scoped>
.tac {
    height: 1400px;
    background-color: grey;
}

.top {
    padding-left: 20px;
    color: white;
}

.layout-container-demo .el-header {
    position: relative;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
}


.layout-container-demo .el-menu {
    border-right: none;
}

.layout-container-demo .el-main {
    padding: 0;
    background-color: pink
}

.layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
}
.layout-container-demo .leftside{
    float: left;
    margin-top: 10px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>